<template>
	<view class="container">
		<!--当前班组-->
		<view class="card" style="margin: 0 20upx 20upx;">
			<view class="title">
				<view class="name">当前班组巡检统计</view>
			</view>
			<view class="item">
				<view class="flex-row">
					<view class="label">班组名称：{{ form.deptName }}</view>
					<view class="value">已巡检：共<text style="color: #00CE1C;">{{ form.hasCheck || 0 }}</text>条</view>
				</view>
			</view>
			<view class="item">
				<view class="flex-row">
					<view class="label">应&nbsp;&nbsp;巡&nbsp;&nbsp;检：共<text style="color: #00CE1C;">{{ form.allCheck || 0 }}</text>条</view>
					<view class="value">未巡检：共<text style="color: red;">{{ form.noCheck || 0 }}</text>条</view>
				</view>
			</view>
		</view>
		<!--近两日班组隐患信息-->
		<view class="card latest" style="margin-bottom: 20upx;border-radius: 0;height: initial;padding-bottom: 2upx;">
			<view class="title">
				<view class="name">近两日班组隐患信息</view>
			</view>
			<view v-for="(item, index) in latest" :key="index" class="card" style="height: initial;margin-bottom: 20upx;">
				<view class="item flex-row">
					<view class="left">
						<view>风险名称：{{ item.fxName }}</view>
						<view>整改责任人：{{ item.done_username }}</view>
						<view>发现时间：{{ item.find_time }}</view>
						<view>整改期限：{{ item.limit_time }}</view>
						<view>请及时整改，消除隐患，安全生成！</view>
					</view>
					<view v-if="item.status" class="right">
						<image src="../../static/img/risk/checked-flag.png"></image>
						<view style="color: #007AFF;">已整改</view>
					</view>
					<view v-else class="right">
						<image src="../../static/img/risk/uncheck.png"></image>
						<view style="color: red;">未整改</view>
					</view>
				</view>
			</view>
		</view>
		<!--交班信息-->
		<view class="card" style="height: initial;padding-bottom: 20upx;margin: 0 20upx;">
			<view class="title">
				<view class="name">交班信息</view>
			</view>
			<view class="item flex-row" style="margin-bottom: 20upx;">
				<view class="info-label">交接班负责人：</view>
				<view @click="toPage('riskHandleMember')" class="info-input flex-row" style="padding: 0 20upx;">
					<text>{{ to_username }}</text>
					<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row" style="align-items: flex-start;">
				<view class="info-label">交接意见说明：</view>
				<view class="info-input">
					<textarea v-model="form.send_sugg" placeholder="输入交接意见"></textarea>
				</view>
			</view>
		</view>
		<button @click="startHandle" type="primary">开始交班</button>
		<!--签名弹出-->
		<uni-popup ref="popup" type="bottom" @change="toggleSign">
			<view class="popup-outter">
				<view class="popup-inner">
					<view class="popup-title">
						<text>签名</text>
						<view @click="clearClick" class="flex-row">
							<image src="../../static/img/grid/clear.png" mode=""></image>
							<text>清除</text>
						</view>
					</view>
					<canvas
						canvas-id="firstCanvas" 
						disable-scroll='true' 
						@touchmove='move' 
						@touchstart='start($event)' 
						@touchend='end' 
						@touchcancel='cancel' 
						@longtap='tap' 
						@error='error'>
					</canvas>
					<view class="btns flex-row">
						<view @click="hideSign">返回看看</view>
						<view @click="overSign">确认签名</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import { isNull } from '@/common/function.js';

var content = null;
var touchs = [];
var _that;

export default{
	components: { uniIcons,uniPopup },
	data(){
		return {
			to_username: '',
			form: {
				userid: uni.getStorageSync('userid'),
				send_sugg: '',
				to_user: '',
				send_sign: ''
			},
			latest: []
		}
	},
	onLoad(){
		this.getUserData();
	},
	onShow(){
		this.form.to_user = uni.getStorageSync("riskHandleCheckedIds")[0] || '';
		this.to_username = uni.getStorageSync('riskHandleCheckedList')[0].name || '';
		
		_that = this
		
		//获得Canvas的上下文
		content = wx.createCanvasContext('firstCanvas');
		//设置线的颜色
		content.setStrokeStyle("#000");
		//设置线的宽度
		content.setLineWidth(5);
		//设置线两端端点样式更加圆润
		content.setLineCap('round');
		//设置两条线连接处更加圆润
		content.setLineJoin('round');
	},
	onBackPress(){
		uni.removeStorageSync('riskHandleCheckedIds');
		uni.removeStorageSync('riskHandleCheckedList');
	},
	methods: {
		// 跳转
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 开始交接
		startHandle(){
			// 数据校验
			if(!this.form.to_user) return uni.showToast({icon: 'none', title: '请选择交接班负责人'});
			if(isNull(this.form.send_sugg)) return uni.showToast({icon: 'none', title: '请输入交接意见'});
			
			// 打开签名
			this.showSign();
		},
		// 获取交班人数据
		getUserData(){
			let _this = this;
			uni.request({
				url: this.$API.riskHandleUserInfo,
				data: {userid: this.form.userid},
				header: this.$API.get_head(),
				success: (res)=>{
					console.log(res)
					_this.form = res.data.data.tongji;
					_this.latest = res.data.data.list;
				}
			});
		},
		// 打开签名
		showSign(type = ''){
			this.$refs.popup.open();
			this.isShowSign = true;
			this.sign_type = type;
		},
		// 关闭签名
		hideSign(){
			this.$refs.popup.close();
			this.isShowSign = false;
			this.clearClick();
		},
		// 切换弹窗
		toggleSign(e){
			this.isShowSign = e.show;
			if(!e.show) this.clearClick();
		},
		// 上传签名
		uploadSign(filePath){
			let _this = this;
			uni.showLoading({title: '加载中'});
			uni.uploadFile({
				url: _this.$API.upload,
				name: 'file',
				filePath: filePath,
				success: function(res) {
					uni.hideLoading();
					_this.hideSign();
					res.data = JSON.parse(res.data);
					_this.form.send_sign = _this.$API.baseURL + res.data.fileName;
					
					// 异步
					uni.request({
						url: _this.$API.riskHandleStart,
						data: {
							userid: uni.getStorageSync('userid'),
							send_sugg: _this.form.send_sugg,
							to_user: _this.form.to_user,
							send_sign: _this.form.send_sign
						},
						header: _this.$API.get_head(),
						success: (res)=>{
							uni.showToast({
								title:"交接成功",
								icon:'none'
							});
							uni.navigateBack();
						}
					});
				},
				fail: function(res) {
					uni.hideLoading();
					uni.showToast({
						title:"交接失败",
						icon:'none'
					});
				}
			});
		},
		// 签名完成
		overSign: function() {
			let _this = this;
			if (this.isEnd) {
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						_this.uploadSign(res.tempFilePath);
					}
				})
			} else {
				uni.showToast({
					title: '请先完成签名',
					icon: "none",
					duration: 1500,
					mask: true
				})
			}
		
		},
		// 画布的触摸移动开始手势响应
		start: function(event) {
			//获取触摸开始的 x,y
			let point = {
				x: event.changedTouches[0].x,
				y: event.changedTouches[0].y
			}
			touchs.push(point);
		},
		// 画布的触摸移动手势响应
		move: function(e) {
			let point = {
				x: e.touches[0].x,
				y: e.touches[0].y
			}
			touchs.push(point)
			if (touchs.length >= 2) {
				this.draw(touchs)
			}
		},
		// 画布的触摸移动结束手势响应
		end: function(e) {
			// 设置为已经签名
			this.isEnd = true
			// 清空轨迹数组
			for (let i = 0; i < touchs.length; i++) {
				touchs.pop()
			}
		},
		// 画布的触摸取消响应
		cancel: function(e) {
			console.log("触摸取消" + e)
		},
		// 画布的长按手势响应
		tap: function(e) {
			console.log("长按手势" + e)
		},
		error: function(e) {
			console.log("画布触摸错误" + e)
		},
		//绘制
		draw: function(touchs) {
			let point1 = touchs[0]
			let point2 = touchs[1]
			touchs.shift()
			content.moveTo(point1.x, point1.y)
			content.lineTo(point2.x, point2.y)
			content.stroke()
			content.draw(true)
		},
		//清除操作
		clearClick: function() {
			this.isEnd = false
			
			// 获取设备宽度
			uni.getSystemInfo({
				success: function(res) {
					content.clearRect(0, 0, res.windowWidth, 200);
				}
			});
			content.draw(true)
		},
	}
}
</script>

<style scoped>
.container{
	padding: 20upx 0;
	box-sizing: border-box;
}
button{
	width: 240upx;
	height: 64upx;
	line-height: 64upx;
	font-size: 28upx;
	margin: 80upx auto;
}
/*卡片*/
.card{
	height: 150upx;
	background: #fff;
	margin-bottom: 16upx;
	border-radius: 16upx;
	padding: 14upx 20upx 0;
	box-shadow: 0 2upx 4upx #DEDEDE;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	font-size: 28upx;
	width: calc((100% - 100upx) / 2);
}
.card .title view.name,
.card .item .left view:first-child{
	text-indent: 16upx;
	position: relative;
}
.card .title view.name::before,
.card .item .left view:first-child::before{
	content: '';
	width: 6upx;
	height: 26upx;
	background: #179DFE;
	border-radius: 6upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card.latest .title view.name::before,
.card .item .left view:first-child::before{
	background-color: red;
}
.card .item *{
	font-size: 26upx;
}
.card .item image{
	width: 80upx;
	height: 100upx;
}
.card .item .label,
.card .item .value{
	width: 50%;
	line-height: 1.6;
}
.card .item .info-label{
	width: 190upx;
}
.card .item .info-input{
	width: calc(100% - 190upx);
	background-color: #F2F2F2;
	border-radius: 10upx;
	box-sizing: border-box;
}
.card .item .info-input textarea{
	width: 100%;
	height: 140upx;
	padding: 14upx;
	box-sizing: border-box;
}.card .card{
	border: 2upx solid #F2F2F2;
}
</style>
